<template>
	<div class="content">
		<div class="clear" style="padding-bottom:20px;">
			<Form :model="query" label-position="left" :label-width="100">
				<Input v-model="query.number" class="w200 m-r10" placeholder="项目编号" />
				<!-- <Select placeholder="请选状态" class="w200 m-r10" v-model="query.status">
          <Option value="0">请选状态</Option>
          <Option value="1">进行中</Option>
          <Option value="2">已结算</Option>
        </Select> -->
				<DatePicker :value="dataValue" type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd" @on-change="getTime" :current.sync="page"></DatePicker>
				<Button type="primary" v-on:click="getConditionQuery()">查询</Button>
				<Button type="primary" class="fr" @click="addT()">添加</Button>
			</Form>
		</div>
		<Table stripe :columns="columns1" :data="data1"></Table>
		<!-- 分页 -->
		<Page :total="info" show-elevator show-total :page-size="pageSize" @on-change="cuctGetQuery" :current.sync="page" />
		<!-- 添加 -->
		<Modal v-model="Modal" title="添加" width="40%">
			<Form :label-width="140" :model="addForm" :rules="rules" ref="refuse">
				<FormItem label="选择项目" prop="freight">
					<Select placeholder="请选择项目" class="w200 m-r10" v-model="addForm.number">
						<Option :value="item.number" v-for="(item,index) in list" :key="index">{{item.cnTitle}}</Option>
					</Select>
				</FormItem>
				<FormItem label="项目描述(中文)" prop="cnContent">
					<quill-editor v-model="addForm.cnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
				<FormItem label="项目描述(英文)" prop="usContent">
					<quill-editor v-model="addForm.usContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
				<!-- <FormItem label="项目描述(越南文)" prop="vnContent">
					<quill-editor v-model="addForm.vnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem> -->
				<!-- <FormItem label="时间" prop="freight">
         <DatePicker type="datetime" placeholder="请选择时间" v-model="lotteryDate" @on-change="lottery"></DatePicker>
        </FormItem>-->
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="Modal=false">取消</Button>
				<Button type="primary" size="large" :loading="marked" @click="addproduct">确定</Button>
			</div>
		</Modal>
		<!-- 修改 -->
		<Modal v-model="Modal1" title="修改" width="40%">
			<Form :label-width="140" :model="editForm" :rules="rules" ref="refuse">
				<FormItem label="选择项目" prop="freight">
					<Select placeholder="请选择项目" disabled class="w200 m-r10" v-model="editForm.number">
						<Option :value="item.number" v-for="(item,index) in list" :key="index">{{item.cnTitle}}</Option>
					</Select>
				</FormItem>
				<FormItem label="项目描述(中文)" prop="cnContent">
					<quill-editor v-model="editForm.cnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
				<FormItem label="项目描述(英文)" prop="usContent">
					<quill-editor v-model="editForm.usContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem>
				<!-- <FormItem label="项目描述(越南文)" prop="vnContent">
					<quill-editor v-model="editForm.vnContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
				</FormItem> -->
				<!-- <FormItem label="时间" prop="freight">
        <DatePicker type="datetime" placeholder="请选择时间" v-model="lotteryDate" @on-change="lottery"></DatePicker>
        </FormItem>-->
			</Form>
			<div slot="footer">
				<Button type="text" size="large" @click="Modal1=false">取消</Button>
				<Button type="primary" size="large" @click="editproduct">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				info: null, //总条数
				pageSize: 10, //每页条数
				page: 1, //当前页码
				list: [],
				listEdit: [],
				editorOption: this.quillOption,
				lotteryDate: "",
				dataValue: ['', ''], //时间段
				rules: {},
				marked:false,//防止重复提交
				query: {
					number: "",
					status: "",
					startTime: ""
				},

				columns1: [{
						title: "项目编号",
						align:'center',
						key: "number"
					},
					{
						title: "描述(中文)",
						align:'center',
						key: "cnContent ",
						render: (h, params) => {
							return h("div", {
								domProps: {
									innerHTML: params.row.cnContent
								},
								style: {
									textOverflow: "ellipsis",
									whiteSpace: "nowrap",
									overflow: "hidden"
								}
							});
						}
					},
					{
						title: "描述(英文)",
						align:'center',
						key: "usContent ",
						render: (h, params) => {
							return h("div", {
								domProps: {
									innerHTML: params.row.usContent
								},
								style: {
									textOverflow: "ellipsis",
									whiteSpace: "nowrap",
									overflow: "hidden"
								}
							});
						}
					},
					// {
					// 	title: "描述(越南文)",
					// 	key: "vnContent ",
					// 	render: (h, params) => {
					// 		return h("div", {
					// 			domProps: {
					// 				innerHTML: params.row.vnContent
					// 			},
					// 			style: {
					// 				textOverflow: "ellipsis",
					// 				whiteSpace: "nowrap",
					// 				overflow: "hidden"
					// 			}
					// 		});
					// 	}
					// },
					{
						title: "时间",
						align:'center',
						key: "createTime ",
						render: (h, params) => {
							return h(
								"div",
								params.row.createTime == "null" ?
								"#" :
								this.stringToTime(params.row.createTime)
							);
						}
					},
					{
						title: "操作",
						key: "action",
						width: 150,
						align: "center",
						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {

												this.Modal1 = true;
												// console.log(params.row);
												this.editForm = Object.assign({}, params.row);
												// this.editForm = params.row
												// console.log(this.editForm);
											}
										}
									},
									"修改"
								),
								h(
									"Button", {
										props: {
											type: "error",
											size: "small"
										},
										on: {
											click: () => {
												this.Modal2 = true;
												this.$Modal.confirm({
													title: "删除进展",
													content: "是否要删除该进展？",
													onOk: () => {
														console.log(params.row.id);
														this.delete(params.row.id);
													}
												});
											}
										}
									},
									"删除"
								)
							]);
						}
					}
				],
				data1: [],
				Modal: false,
				addForm: {
					cnContent: "", //中文内容
					// createTime :'',//时间
					number: "", //项目编号
					usContent: "", //英文内容
					vnContent: "" //越南文内容
				},
				editForm: {
					cnContent: "", //中文内容
					// createTime :'',//时间
					number: "", //项目编号
					usContent: "", //英文内容
					vnContent: "" //越南文内容
				},
				Modal1: false
			};
		},
		methods: {
			//页面加载
			getprogress(page) {
				let obj = this.qs.stringify({
					current: page,
					size: this.pageSize,
					number: this.query.number,
					status: this.query.status,
					startTime: this.dataValue[0] == "" ? "" : this.dataValue[0] + " 00:00:01", // 起始日期,
					endTime: this.dataValue[1] == "" ? "" : this.dataValue[1] + " 23:59:59", // 结束日期,
				});
				// console.log(this.dataValue);
				//  console.log(obj);
				this.axios.post("crowdfunding/progress/query", obj).then(res => {
					// console.log(res);
					this.data1 = res.data.data.records;
					this.info = res.data.data.total;
					if(this.data1.length == 0){
						this.page  -= 1;
						this.getprogress(this.page);
					}
				});
			},
			add() {
				this.addForm = {
						cnContent: "", //中文内容
						// createTime :'',//时间
						number: "", //项目编号
						usContent: "", //英文内容
						vnContent: "" //越南文内容
					},
					this.axios.post("crowdfunding/project/query").then(res => {
						// console.log(res.data.data);

						// console.log(res.data.data.records);
						this.list = res.data.data.records;
						// res.data.data.records.forEach(item=>{
						//   console.log(item.number);
						//   this.list.push(item.number)
						// })
					});
			},
			addT() {
				this.Modal = true;
				this.query.number = '';
				this.dataValue = ['', ''];
				this.add();
				this.marked = false;
			},
			//添加事件
			addproduct() {

				if(this.addForm.number == '') {
					this.$Message.info('项目不能为空')
					return
				}
				if(this.addForm.cnContent == '') {
					this.$Message.info('项目描述中文不能为空')
					return
				}
				if(this.addForm.usContent == '') {
					this.$Message.info('项目描述英文不能为空')
					return
				}
				// if(this.addForm.vnContent == '') {
				// 	this.$Message.info('项目描述越南文不能为空')
				// 	return
				// }
				let params = this.qs.stringify({
					cnContent: this.addForm.cnContent, //中文内容
					// createTime :this.stringToTime(this.addForm.createTime),//时间
					number: this.addForm.number, //项目编号
					usContent: this.addForm.usContent, //英文内容
					vnContent: this.addForm.vnContent //越南文内容
				});
				if (!this.marked) {
					this.marked = true
					this.axios.post("crowdfunding/progress/add", params).then(res => {
				
					if(res.data.code === 200) {
						this.Modal = false;
						this.page = 1
						this.getprogress(this.page);
						this.$Message.info(res.data.msg);
					}
					 setTimeout(() => {
						this.marked = false;
					}, 1000);
				});
				}
				
			},
			//修改事件
			editproduct() {
				if(this.editForm.cnContent == '') {
					this.$Message.info('项目描述中文不能为空')
					return
				}
				if(this.editForm.usContent == '') {
					this.$Message.info('项目描述英文不能为空')
					return
				}
				// if(this.editForm.vnContent == '') {
				// 	this.$Message.info('项目描述越南文不能为空')
				// 	return
				// }
				let obj = this.qs.stringify({
					cnContent: this.editForm.cnContent, //中文内容
					// createTime :'this.addFrom时间
					number: this.editForm.number, //项目编号
					usContent: this.editForm.usContent, //英文内容
					vnContent: this.editForm.vnContent, //越南文内容
					id: this.editForm.id
				});
				this.axios.post("/crowdfunding/progress/update", obj).then(res => {

					if(res.data.code === 200) {
						this.$Message.info(res.data.msg);
						this.Modal1 = false;
						this.getprogress(this.page);
					}
				});
			},
			//删除事件
			delete(id) {
				this.axios.delete(`/crowdfunding/progress/delete/${id}`).then(res => {
					if(res.data.code === 200) {
						this.$Message.info(res.data.msg);
						// this.page = 1
						this.getprogress(this.page);
					}
				});
			},
			//页码改变的回调
			cuctGetQuery() {

				this.getprogress(this.page);
			},
			//查询事件
			getConditionQuery() {
				this.page = 1
				this.getprogress(this.page)
			},
			getTime(daterange) { // 处理时间段时间格式
				this.dataValue = daterange;
			}, //时间
			lottery() {},
			productCannel() {},
			product() {},
			onEditorBlur() {},
			onEditorFocus() {},
			onEditorChange() {}
		},
		created() {
			this.add();
		},
		mounted() {
			this.getprogress(this.page);
		}
	};
</script>

<style scoped>

</style>